<!--
 * @Description: 
 * @Author:  huangshuai
 * @Date: 2023-10-20 15:07:34
 * @LastEditTime: 2023-10-25 14:56:44
 * @LastEditors: huangshuai 
-->
<template>
  <div class="jump-home">
    你当前访问的页面不存在，将于
    <span class="count">{{ store.countdown404 }} </span> 秒后跳后当前角色
    <span class="home" @click="handleJump">首页</span>
  </div>

  <div class="not-found">
    <img src="../../assets/bg/404.gif" />
  </div>
</template>
<script lang="ts" setup name="404">
import { watch } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/user";
const router = useRouter();
const store = useUserStore();

const handleJump = async () => {
  await router.push("/");
  store.countdown404 = 5;
};
watch(
  () => store.countdown404,
  () => {
    setTimeout(async () => {
      store.countdown404 > 0
        ? store.countdown404--
        : (await router.push("/"), (store.countdown404 = 5));
    }, 1000);
  },
  {
    immediate: true,
  }
);
</script>
<style scoped lang="less">
.not-found {
  width: 100%;
  height: 100%;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}

.jump-home {
  position: absolute;
  font-size: 30px;
  width: 100%;
  text-align: center;
  top: 50px;
  font-weight: bold;

  .home {
    // text-decoration: underline;
    border-bottom: 2px black solid;
    cursor: pointer;
  }
}
</style>
